<template>
  <Modal
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    :width="540"
    footer-hide
    :title="type == 1 ? '添加发票信息' : '修改发票信息'"
  >
    <div class="modal-main" style="position: relative">
      <Spin :withIcon="true" v-if="loading"></Spin>
      <div class="inner-main">
        <div class="flx-row-s-c item-line">
          <div class="title-name">开具类型</div>
          <RadioGroup v-model="issuingType">
            <Radio class="radio-mg-r-20" :label="0" :disabled="type == 2"
              >个人</Radio
            >
            <Radio class="radio-mg-r-20" :label="1" :disabled="type == 2"
              >企业</Radio
            >
          </RadioGroup>
        </div>
        <div class="flx-row-s-c item-line">
          <div class="title-name">发票类型</div>
          <RadioGroup v-model="invoiceType">
            <Radio class="radio-mg-r-20" :label="0" :disabled="type == 2"
              >增值税普通发票</Radio
            >
            <Radio class="radio-mg-r-20" :label="1" :disabled="type == 2"
              >增值税专用发票</Radio
            >
          </RadioGroup>
        </div>
        <div class="flx-row-s-c item-line">
          <div class="title-name">发票抬头</div>
          <Input
            clearable
            v-model.trim="header"
            placeholder="请输入"
            maxlength="30"
            style="width: 200px"
          />
        </div>
        <div
          class="flx-row-s-c item-line"
          v-if="!(issuingType == 0 && invoiceType == 0)"
        >
          <div class="title-name">税务登记号</div>
          <Input
            clearable
            v-model.trim="taxId"
            placeholder="请输入"
            maxlength="30"
            style="width: 200px"
          />
        </div>
        <template v-if="invoiceType == 1">
          <div class="flx-row-s-c item-line">
            <div class="title-name">开户行</div>
            <Input
              clearable
              v-model.trim="bankName"
              placeholder="请输入"
              maxlength="30"
              style="width: 200px"
            />
          </div>
          <div class="flx-row-s-c item-line">
            <div class="title-name">开户账户</div>
            <Input
              clearable
              v-model.trim="bankCard"
              placeholder="请输入"
              maxlength="30"
              style="width: 200px"
            />
          </div>
          <div class="flx-row-s-c item-line">
            <div class="title-name">注册地址</div>
            <Input
              clearable
              v-model.trim="address"
              placeholder="请输入"
              maxlength="30"
              style="width: 200px"
            />
          </div>
          <div class="flx-row-s-c item-line">
            <div class="title-name">联系电话</div>
            <Input
              clearable
              v-model.trim="mobile"
              placeholder="请输入"
              maxlength="11"
              style="width: 200px"
            />
          </div>
          <div class="flx-row-s-s item-line">
            <div class="title-name">一般纳税人资质证明</div>
            <div class="flx-col-c-c">
              <Upload
                v-if="!certificateFileImg"
                type="drag"
                :before-upload="certificateHandleBeforeUpload"
                :show-upload-list="false"
                action="/"
              >
                <div class="add-photo"></div>
              </Upload>
              <div
                v-else
                class="img-display"
                :style="{ backgroundImage: 'url(' + certificateFileImg + ')' }"
              >
                <div class="delect-area" @click="deletePic(1)"></div>
              </div>
              <span class="c-g" style="margin-top: 5px">图片大小不超过1M</span>
            </div>
          </div>
          <div class="flx-row-s-s item-line">
            <div class="title-name">税务登记证复印件</div>
            <div class="flx-col-c-c">
              <Upload
                v-if="!taxFileImg"
                type="drag"
                :before-upload="taxHandleBeforeUpload"
                :show-upload-list="false"
                action="/"
              >
                <div class="add-photo"></div>
              </Upload>
              <div
                v-else
                class="img-display"
                :style="{ backgroundImage: 'url(' + taxFileImg + ')' }"
              >
                <div class="delect-area" @click="deletePic(2)"></div>
              </div>
              <span class="c-g" style="margin-top: 5px">图片大小不超过1M</span>
            </div>
          </div>
        </template>
      </div>
      <div class="flx-row-c-c" style="margin-top: 20px">
        <div
          class="big-button-size user-strong-button"
          style="margin-right: 50px"
          @click="submit"
        >
          确认
        </div>
        <div class="big-button-size user-normal-button" @click="cancel">
          取消
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
import { submitSaveInvoiceInfo, getInvoiceInfo } from "@/api/user";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    type: {
      default: 1, // 1:create 2:update
    },
    id: {
      default: null,
    },
  },
  watch: {
    show: {
      handler(newValue) {
        if (newValue) {
          if (this.type == 2) {
            this.getInfo();
          }
        }
      },
    },
  },
  data() {
    return {
      loading: false,
      // 表单数据
      issuingType: 0,
      invoiceType: 0,

      header: "",
      taxId: "",
      bankName: "",
      bankCard: "",
      address: "",
      mobile: "",

      certificateFile: null,
      certificateFileImg: "",
      taxFile: null,
      taxFileImg: "",
    };
  },
  methods: {
    // 选择图片后处理
    certificateHandleBeforeUpload: function (file) {
      if (
        file.type != "image/jpeg" &&
        file.type != "image/png" &&
        file.type != "image/jpg"
      ) {
        this.$Message.warning("图片要求上传jpg或者png格式或者jpeg格式");
        return false;
      }
      if (file.size > 1048576) {
        this.$Message.warning("图片大小不能超过1M");
        return false;
      }
      this.certificateFile = file;
      this.certificateFileImg = window.URL.createObjectURL(file);

      return false;
    },
    // 选择图片后处理
    taxHandleBeforeUpload: function (file) {
      if (
        file.type != "image/jpeg" &&
        file.type != "image/png" &&
        file.type != "image/jpg"
      ) {
        this.$Message.warning("图片要求上传jpg或者png格式或者jpeg格式");
        return false;
      }
      if (file.size > 1048576) {
        this.$Message.warning("图片大小不能超过1M");
        return false;
      }

      this.taxFile = file;
      this.taxFileImg = window.URL.createObjectURL(file);
      return false;
    },
    // 删除图片
    deletePic(index) {
      if (index == 1) {
        this.certificateFile = null;
        this.certificateFileImg = "";
      } else {
        this.taxFile = null;
        this.taxFileImg = "";
      }
    },
    // 提交表单
    async submit() {
      if (!this.header) {
        this.$Message.warning("请输入发票抬头！");
        return;
      }
      if (!(this.issuingType == 0 && this.invoiceType == 0)) {
        if (!this.taxId) {
          this.$Message.warning("请输入税务登记号！");
          return;
        }
      }
      if (this.invoiceType == 1) {
        if (!this.bankName) {
          this.$Message.warning("请输入开户行！");
          return;
        }
        if (!this.bankCard) {
          this.$Message.warning("请输入开户账户！");
          return;
        }
        if (!this.address) {
          this.$Message.warning("请输入注册地址！");
          return;
        }
        if (!this.mobile) {
          this.$Message.warning("请输入联系电话！");
          return;
        }
        if (!this.certificateFileImg) {
          this.$Message.warning("请上传一般纳税人资质证明！");
          return;
        }
        if (!this.taxFileImg) {
          this.$Message.warning("请上传税务登记证复印件！");
          return;
        }
      }

      this.loading = true;
      let data = new FormData();
      data.append("issuingType", this.issuingType);
      data.append("invoiceType", this.invoiceType);
      data.append("header", this.header);
      if (!(this.issuingType == 0 && this.invoiceType == 0))
        data.append("taxId", this.taxId);
      if (this.invoiceType == 1) {
        data.append("bankName", this.bankName);
        data.append("bankCard", this.bankCard);
        data.append("address", this.address);
        data.append("mobile", this.mobile);
        if (this.certificateFile)
          data.append("certificateFile", this.certificateFile);
        if (this.taxFile) data.append("taxFile", this.taxFile);
      }
      if (this.id) {
        data.append("id", this.id);
      }
      let res = await submitSaveInvoiceInfo(data);
      if (res.code == 200) {
        this.$Message.success(`${this.type == 1 ? "添加" : "修改"}成功！`);
        this.$emit("submit-success");
        this.cancel();
      }
      this.loading = false;
    },
    // 清空表单
    cancel() {
      this.config = false;

      this.issuingType = 0;
      this.invoiceType = 0;

      this.header = "";
      this.taxId = "";
      this.bankName = "";
      this.bankCard = "";
      this.address = "";
      this.mobile = "";

      this.certificateFile = null;
      this.certificateFileImg = "";
      this.taxFile = null;
      this.taxFileImg = "";
    },
    // 获取发票信息
    async getInfo() {
      if (!this.id) return;
      this.loading = true;
      let res = await getInvoiceInfo({ id: this.id });
      if (res.code == 200) {
        this.issuingType = res.data.issuingType;
        this.invoiceType = res.data.invoiceType;
        this.header = res.data.header;
        this.taxId = res.data.taxId;
        this.bankName = res.data.bankName;
        this.bankCard = res.data.bankCard;
        this.address = res.data.address;
        this.mobile = res.data.mobile;
        this.certificateFileImg = res.data.certificateImg;
        this.taxFileImg = res.data.taxImg;
      } else {
        this.cancel();
      }
      this.loading = false;
    },
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.modal-main {
  padding-bottom: 30px;

  .inner-main {
    padding: 30px 40px 20px;
    max-height: 430px;
    overflow-y: auto;
  }
  .item-line {
    margin-bottom: 10px;
  }
  .title-name {
    text-align: right;
    width: 130px;
    margin-right: 30px;
    font-size: 14px;
    line-height: 32px;
    color: #000;
    flex-shrink: 0;
    &::after {
      content: ":";
    }
  }
}
.add-photo {
  @include size(200px, 121px);
  @include bg-setting("add-photo");
  cursor: pointer;
}
.img-display {
  @include size(200px, 121px);
  border: 1px dashed #dcdee2;
  @include bg-setting();
  position: relative;
  border-radius: 5px;
}
.img-display .delect-area {
  display: none;
}
.img-display:hover .delect-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #fc461e;
  @include bg-setting("cuowu", 10px 10px, center);
  transition: background-color 0.2s;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
</style>